<template>
  <div class="searchOuter">
    <div class="searchInner">
      <div class="searchFormItem" :class="item.class" v-for="(item, index) in searchList" :key="index">
        <Select v-if="item.type == 'select'" transfer clearable class="search-box select-border" v-model="searchBean[item.attr]" :placeholder="item.placeholder">
          <Option v-for="(item, index) in item.list" :value="item.id" :key="index" :label="item.name">
            {{ item.name }}</Option>
        </Select>
        <YsInput v-if="item.type == 'input'" class="search-box search-input" clearable v-model.trim="searchBean[item.attr]" :placeholder="item.placeholder"> </YsInput>
        <YsDatePicker v-if="item.type == 'time'" v-model="searchBean[item.attr]" @on-change="searchBean[item.attr]=$event" transfer class="search-box" type="date" :format="`yyyy-MM-dd`" placement="bottom-end" placeholder="请选择透照日期">
        </YsDatePicker>
        <span v-if="item.type == 'button'" class="icon iconfont icon-zhankai-shouqi text_01" :class="rotate ? 'go_shouqi' : 'to_shouqi'" @click="setZhanKai()"></span>
      </div>
    </div>
    <div class="searchInner spacing-mt8" v-if="rotate">
      <div class="searchFormItem" :class="item.class" v-for="(item, index) in searchListTow" :key="index">
        <Select v-if="item.type == 'select'" transfer clearable class="search-box select-border" v-model="searchBean.flaw_type" placeholder="请选择缺陷类型">
          <Option v-for="(item, index) in item.list" :value="item.id" :key="index" :label="item.name">
            {{ item.name }}</Option>
        </Select>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "SearchSelector",
  data: () => {
    return {
      searchBean: {
        label_no: "", //底片识别号
        is_again: null, //是否复拍:0-否，1-是
        pat_date: "", //透照日期
        weld_no: "",  //焊缝编号
        weld_position: "",//焊缝位号
        file_level: null, //缺陷等级
        flaw_type: null, //缺陷类型

      },
      searchList: [
        {
          type: "select", attr: "file_level", class: "", value: null, list: [
            { id: 0, name: '全部状态' },
            { id: 1, name: 'Ⅰ级' },
            { id: 2, name: 'Ⅱ级' },
            { id: 3, name: 'Ⅲ级' },
            { id: 4, name: 'Ⅳ级' },
          ], placeholder: "请选择缺陷等级"
        },
        { type: "input", attr: "label_no", class: "", value: null, list: [], placeholder: "请输入底片标识号" },
        {
          type: "select", attr: "is_again", class: "", value: null, list: [
            { id: 1, name: '是' },
            { id: 0, name: '否' },
          ], placeholder: "是否为复拍件"
        },
        { type: "input", attr: "pat_date", class: "", value: null, list: [] ,placeholder: "请输入透照日期"},
        { type: "input", attr: "weld_no", class: "", value: null, list: [], placeholder: "请输入焊缝编号" },
        { type: "input", attr: "weld_position", class: "", value: null, list: [], placeholder: "请输入焊缝位号" },
        {
          type: "button", attr: "", class: "", value: null, list: []
        },
      ],
      searchListTow: [
        {
          type: "select", attr: "flaw_type", class: "", value: null, list: [

          ], placeholder: "请选择缺陷类型"
        },
        {},
        {},
        {},
        {},
        {},
        {},
      ],

      rotate: false,
    }
  },
  props: {
    //表头

  },
  provide() {
    return {
      thisdialog: this
    };
  },
  created() {
    this.getQueXianLeiXing()
  },
  methods: {
    ...mapActions(["getqxjcPageFlawType"]),
    //切换搜索开关
    setZhanKai() {
      this.rotate = !this.rotate
      this.$emit("setRotate", this.rotate)
    },
    //获取服务列表
    getQueXianLeiXing() {
      this.getqxjcPageFlawType({ limit_recd: 99999 }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.searchListTow[0].list = data.flawTypeInfos.map(v => { return { ...v, name: v.type_name } });
        } else {
          this.searchListTow[0].list = []
          this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        this.$YsMessage.error("获取数据失败");
      });
    },
  }
};
</script>

<style lang="less" scoped>
.searchOuter {
  // display: flex;
  // flex-wrap: wrap;
  width: calc(100% - 150px);
  position: relative;
  .searchInner {
    display: flex;
  }
  .searchFormItem {
    margin-bottom: 0;
    margin-right: 10px;
    width: 230px;
    position: relative;
    .search-box {
      width: 100%;
      height: 40px;
    }
  }
  .spacing-mt8 {
    margin-top: 8px;
  }
  .search-footer {
    width: 210px;
    display: flex;
    /deep/ .ivu-select-selection {
      width: 100%;
    }
  }

  .go_shouqi {
    transform: rotate(-90deg);
  }

  .icon-zhankai-shouqi {
    position: absolute;
    top: 13px;
    // right: 78px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
    // transform-origin:center center;
  }

  .to_shouqi {
    transform: rotate(90deg);
  }
}
</style>
